<template>
  <div class="page-user-config">
    <el-page-header icon="">
      <template #title>
        <div style="font-size: 18px">{{ lang.t('page.user.config.page_name') }}</div>
      </template>
      <template #content>
        <div style="font-size: 14px">{{ lang.t('page.user.config.page_content') }}</div>
      </template>
    </el-page-header>
    <div class="header">
      <div class="logo">
        <Upload v-model="form.logo">
          <template #default="scope">
            <div v-loading="scope.loading" @click="scope.click()">
              <img v-if="form.logo" :src="app.img(form.logo)"/>
              <span v-else>
                <i class="iconfont align pro icon-upload" /> {{ lang.t('page.user.config.logo') }}
              </span>
            </div>
          </template>
        </Upload>
      </div>
      <div class="update">
        <el-button type="primary" @click="onUpdate">{{ lang.t('common.update') }}</el-button>
      </div>
      <div class="username">{{ form.email }}</div>
      <div class="time">{{ lang.t('page.user.config.stop_at') }} {{ form.stop_at }}</div>
    </div>
    <el-form ref="formRef" :model="form" :rules="rules" label-position="top">
      <el-row :gutter="30">
        <el-col :md="8" :lg="6" :xl="4">
          <el-form-item :label="lang.t('page.user.config.name')" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :md="8" :lg="6" :xl="4">
          <el-form-item :label="lang.t('page.user.config.phone')" prop="phone">
            <el-input v-model="form.phone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :md="8" :lg="6" :xl="4">
          <el-form-item :label="lang.t('page.user.config.password')" prop="password">
            <el-input v-model="form.password" show-password></el-input>
          </el-form-item>
        </el-col>
        <el-divider></el-divider>
        <el-col :md="8" :lg="6" :xl="4">
          <el-form-item :label="lang.t('page.user.config.country')" prop="country">
            <div style="width: 100%; overflow: hidden">
              <el-select v-model="form.country" style="width: 100%">
                <el-option v-for="item in countryModel.getList()" :value="item.name" :label="item.name" :key="item.id"></el-option>
              </el-select>
            </div>
          </el-form-item>
        </el-col>
        <el-col :md="8" :lg="6" :xl="4">
          <el-form-item :label="lang.t('page.user.config.city')" prop="city">
            <el-input v-model="form.city"></el-input>
          </el-form-item>
        </el-col>
        <el-col :md="8" :lg="6" :xl="4">
          <el-form-item :label="lang.t('page.user.config.area')" prop="area">
            <el-input v-model="form.area"></el-input>
          </el-form-item>
        </el-col>
        <el-col :md="16" :lg="12" :xl="8">
          <el-form-item :label="lang.t('page.user.config.address')" prop="address">
            <el-input v-model="form.address"></el-input>
          </el-form-item>
        </el-col>
        <el-col :md="8" :lg="6" :xl="4">
          <el-form-item :label="lang.t('page.user.config.zip')" prop="zip">
            <el-input v-model="form.zip"></el-input>
          </el-form-item>
        </el-col>
        <el-divider></el-divider>
        <el-col :md="8" :lg="6" :xl="4">
          <el-form-item :label="lang.t('page.user.config.tax')" prop="tax">
            <el-input v-model="form.tax"></el-input>
          </el-form-item>
        </el-col>
        <el-col :md="8" :lg="6" :xl="4">
          <el-form-item :label="lang.t('page.user.config.bank')" prop="bank">
            <el-input v-model="form.bank"></el-input>
          </el-form-item>
        </el-col>
        <el-col :md="8" :lg="6" :xl="4">
          <el-form-item :label="lang.t('page.user.config.bank_name')" prop="bank_name">
            <el-input v-model="form.bank_name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :md="8" :lg="6" :xl="4">
          <el-form-item :label="lang.t('page.user.config.bank_user')" prop="bank_user">
            <el-input v-model="form.bank_user"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { ref } from 'vue'
import app from '@/app'
import userModel from '@/model/user'
import countryModel from '@/model/country'

import Upload from '@/components/upload'

export default {
  components: {
    Upload
  },
  setup() {
    // 表单
    const formRef = ref(null)
    const form = ref({})

    // 验证
    const rules = {
      name: [
        { required: true, message: ' ', trigger: 'blur' }
      ],
      phone: [
        { required: true, message: ' ', trigger: 'blur' }
      ],
      country: [
        { required: true, message: ' ', trigger: 'blur' }
      ],
      city: [
        { required: true, message: ' ', trigger: 'blur' }
      ],
      area: [
        { required: true, message: ' ', trigger: 'blur' }
      ],
      address: [
        { required: true, message: ' ', trigger: 'blur' }
      ],
      zip: [
        { required: true, message: ' ', trigger: 'blur' }
      ],
    }

    // 更新
    const loading = ref(false)
    const onUpdate = () => {
      formRef.value.validate(valid => {
        if (valid) {
          loading.value = true
          userModel.update(form.value).finally(() => {
            loading.value = false
          })
        }
      })
    }

    // 用户信息
    userModel.get()

    // 更新表单
    form.value = userModel.getData()

    return {
      app,
      lang: app.lang,
      form,
      formRef,
      rules,
      countryModel,
      onUpdate
    }
  }
}
</script>